<template>
  <div class="home-container">
    <van-nav-bar title="今天头条" fixed>
      <template #right>
        <van-icon name="search" size="18" />
      </template>
    </van-nav-bar>
    <van-tabs sticky offset-top="45">
      <van-tab
        v-for="(item, index) in userChannel"
        :title="item.name"
        :key="index"
      >
        <article-list :channel-id="item.id"></article-list>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import { getUserChannelAPI } from '@/api/homeAPI'
import ArticleList from '@/components/ArticleList/ArticleList.vue'
export default {
  data() {
    return {
      userChannel: []
    }
  },
  created() {
    this.getUserChannel()
  },
  components: {
    ArticleList
  },
  computed: {},
  mounted() {},
  methods: {
    async getUserChannel() {
      const { data: res } = await getUserChannelAPI()
      this.userChannel = res.data.channels
    }
  }
}
</script>
<style lang="less" scoped>
.home-container {
  padding-top: 92px;
  padding-bottom: 100px;
}
</style>
